<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
	href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />
<link rel="stylesheet" href="../../../js/layui/css/layui.css" />
<script src="../../../js/layui/layui.js"></script>
<script src="../../../js/vue/axios.min.js"></script>
<script src="../../../js/vue/vue.js"></script>

<style>
.container {
	margin-top: 38px;
	margin-left: 90px;
}

input {
	margin: 10px;
}

.layui-btn {
	margin-left: 110px;
}

.layui-form-item {
	margin-top: 50px;
}
</style>
</head>
<body>

	<div id="app" class="layui-form">
		<div class="container">
			<div class="layui-inline">
				<label class="layui-form-label" style="width: 100px;">网站名称：</label>
				<div class="layui-input-inline">
					<input type="text" v-model="link_name" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label" style="width: 100px;">网站链接：</label>
				<div class="layui-input-inline">
					<input type="url" v-model="link_url" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item layui-form-text" style="margin-top: 10px">
				<label class="layui-form-label" style="width: 100px;">网站描述:</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea"
						style="width: 200px" v-model="link_description"></textarea>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label" style="width: 100px;">友链类别：</label>
				<div class="layui-input-inline">
					<select v-model="link_type" id="link_type">
						<option value="0">友链</option>
						<option value="1">推荐</option>
						<option value="2">个人网站</option>
					</select>
				</div>
			</div>


			<div class="layui-form-item">
				<button class="layui-btn" @click="add">提交</button>
				<button type="button" class="layui-btn layui-btn-primary" id="close">关闭</button>
			</div>

		</div>
	</div>
	<script>
	var $
	
	//添加
	new Vue({
		el:'#app',
		data:{
			link_name:"",//网站名称
			link_url:"",//网站链接
			link_description:"",//网站描述
			link_type:0//网站类别
		},
		methods:{
			add:function(){
				this.link_type=$("#link_type").val();
				var params = new URLSearchParams();
				params.append('link_name',this.link_name);
				params.append('link_url',this.link_url);
				params.append('link_description',this.link_description);
				params.append('link_type',this.link_type);
				
				if(
					this.link_name==null || this.link_name==''|| this.link_name.indexOf(" ")!=-1||
					this.link_url==null || this.link_url==''|| this.link_url.indexOf(" ")!=-1||
					this.link_description==null || this.link_description==''|| this.link_description.indexOf(" ")!=-1||
					this.link_type==null || this.link_type==''|| this.link_type.indexOf(" ")!=-1
				){
					alert("该项操作不能为空（包括空格）！");
				}else{
				axios.post('/ssb/link/add',params).then(res=>{
					console.log(res.data);
					if(res.data>0){
						succeed()
					}
				},err=>{
					console.log(err);
				}); 
				
				}
			}
		}
	});
	
	function succeed() {
		layui.use(['form', 'jquery'], function() {
			layer.alert("添加成功！", function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
			});
		});
	}
	
	layui.use(['form', 'jquery'], function() {
		$=layui.jquery
	  $("#close").on('click',function(){
		layui.use(['form', 'jquery'], function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
		});
	});
	
	});
	
	</script>
</body>
</html>
